<template>
  <div class="">
    <div class="module-card" v-for="(item, index) in showList" :key="index">
      <h3>{{ item.label }}<i class="iconfont icon-wancheng1" /></h3>
      <div class="list">
        <div
          class="item"
          v-for="(list, ind) in item.list"
          :key="ind"
          @click="toDetail(list)"
        >
          {{ list.label }}
        </div>
      </div>
    </div>

    <dialog>
      <div>这里是内容</div>
    </dialog>
  </div>
</template>

<script>
import BigNumber from 'bignumber.js';
export default {
  props: {},
  components: {},
  data() {
    return {
      showList: [
        {
          label: '通用封装组件',
          list: [
            { label: '菜单简易版', path: 'menu', name: 'test-menu' },
            {
              label: '消息提示框、英制输入框、原生js实现的消息提示',
              path: 'notifyMessage',
              name: 'test-notifyMessage',
            },
            { label: '3D画布', path: 'threeD', name: 'test-threeD' },
            { label: '点击文字的提示', path: 'toolTip', name: 'test-toolTip' },
            {
              label: '简易发送邮件',
              path: 'sendEmail',
              name: 'test-sendEmail',
            },
            {
              label: '图片懒加载方式一',
              path: 'imageLazy-one',
              name: 'test-imageLazy-one',
            },
            {
              label: '图片懒加载方式二',
              path: 'imageLazy-two',
              name: 'test-imageLazy-two',
            },
          ],
        },
        {
          label: '方法使用',
          list: [
            { label: 'Mixin混入', path: 'mixin', name: 'test-mixin' },
            {
              label: 'Mixin与Class类结合并共享数据源',
              path: 'mixinAndClass',
              name: 'test-mixinAndClass',
            },
            {
              label: '异步更新队列',
              path: 'asyncUpdate',
              name: 'test-asyncUpdate',
            },
            {
              label: '等比例缩放区域',
              path: 'equalScaling',
              name: 'test-equalScaling',
            },
            {
              label: '生成二维码',
              path: 'qrcode',
              name: 'test-qrcode',
            },
            {
              label: 'JS遍历生成HTML节点或字符串',
              path: 'jsForHTML',
              name: 'test-jsForHTML',
            },
            {
              label: '数组差集、并集、交集',
              path: 'array',
              name: 'test-array',
            },
            {
              label: '鼠标选中DIV进行拖动',
              path: 'driveDiv',
              name: 'test-driveDiv',
            },
          ],
        },
        {
          label: '自定义事件',
          list: [
            {
              label: '实现一个自己的intanceof(a,b)',
              path: 'myIntanceof',
              name: 'test-myIntanceof',
            },
            {
              label: '随机生成颜色',
              path: 'createColor',
              name: 'test-createColor',
            },
          ],
        },
        {
          label: '计算方法',
          list: [
            {
              label: '判断一个值是否是字母或数字',
              path: 'isLetteOrNumber',
              name: 'test-isLetteOrNumber',
            },
            {
              label: '算法-分班',
              path: 'division',
              name: 'test-division',
            },
            {
              label: '算法-高矮排队',
              path: 'queue',
              name: 'test-queue',
            },
            {
              label: '算法-字符串加密',
              path: 'encrypt',
              name: 'test-encrypt',
            },
          ],
        },
        {
          label: '有趣小组件',
          list: [
            {
              label: 'HTML+CSS+JS 实现时钟',
              path: 'clock',
              name: 'test-clock',
            },
            {
              label: 'HTML+CSS+JS 实现日历',
              path: 'calendar',
              name: 'test-calendar',
            },
          ],
        },
        {
          label: 'CSS',
          list: [
            {
              label: 'CSS样式使用',
              path: 'css',
              name: 'test-css',
            },
            {
              label: 'CSS动画、过渡效果',
              path: 'cssRunning',
              name: 'test-cssRunning',
            },
            {
              label: '常见web端布局',
              path: 'cssFlex',
              name: 'test-cssFlex',
            },
          ],
        },
      ],
      displayDialog: true,
    };
  },
  created() {},
  mounted() {
    let a = new BigNumber('101.6');
    let b = a.plus(50.8);

    console.log(b.toNumber()); // 152.4
    this.loopsFun();
  },
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    toDetail(item) {
      this.$router.push({ path: item.path });
    },
    loopsFun() {
      let num = 0;
      const loops = (n) => {
        num = num + 1;
        n = n - num;
        if (n > 0) {
          console.log(n);
          loops(n);
        } else {
          n = n + 1;
          console.log(n);
        }
      };
      let n = 10;
      loops(n);
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.module-card {
  h3 {
    i {
      margin-left: 12px;
      font-size: 16px;
      color: #565656;
    }
  }
}
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    padding: 5px 8px;
    margin-right: 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    &:hover {
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
      color: yellowgreen;
      transform: scale(1.1);
    }
  }
}
</style>
